//入口文件
import Vue from 'vue'

//1.1 导入路由的包
import VueRouter from 'vue-router'
//1.2 安装路由
Vue.use(VueRouter)

//导入格式化时间的插件
import moment from 'moment'

//定义全局的过滤器
Vue.filter('dateFormat',function(datastr,pattern = "YYYY-MM-DD HH:mm:ss"){
    return moment(datastr).format(pattern)
})

//2.1 导入 vue-resource
import VueResource from 'vue-resource'
//2.2 安装 vue-resource
Vue.use(VueResource)
//设置请求的根路径
// Vue.http.options.root = "http://www.liulongbin.top:3005";
//全局设置 post 时候表单数据格式组织形式
Vue.http.options.emulateJSON = true;

//每次进入网站，肯定会调用 mian.js 在刚刚调用的时候，先把本地储存中，把购物车的数据读取出来 放到 store 中
var cart = JSON.parse(localStorage.getItem('cart') || '[]');
//导入 vuex
import Vuex from 'vuex'
//注册 vuex 到 vue 中
Vue.use(Vuex)
//创建 Vuex.store() 实例
const store = new Vuex.Store({
    state:{// this.$store.state.***
        cart: cart// 将商品购物的数据储存到一个数组中 {id:商品id,count:要购买的数量,price:商品购价,selected:true（购买状态）}
    },
    mutations:{// this.$store.commit("方法名",参数)
        addtocart(state,goodsinfo){
            // 点击购物车，把商品信息，保存到 store 中的 cart 中
            // 分析：
            // 1.如果购物车中，之前就有这个对应的商品了，那么只需要更新数据就好
            // 2.如果没有，就需要把 商品数据 push 到 cart 中
            var flag = false;
            state.cart.some(item=>{
                if(item == goodsinfo){
                    item.count += parseInt(goodsinfo.count);
                    return !flag;
                }
            })
            if(!flag){
                state.cart.push(goodsinfo);
            }

            // 当更新 cart 后，把 cart 数组，储存到本地 localStorage 中
            localStorage.setItem('cart',JSON.stringify(state.cart));
        },
        updatacart(state,goodsinfo){
            //修改购物车中商品的数量值
            state.cart.some(item=>{
                if(item.id === goodsinfo.id){
                    item.count = parseInt(goodsinfo.count)
                    return true
                }
            })
            //修改完数量保存新的数据到本地存储中去
        var cart = JSON.parse(localStorage.getItem('cart') || '[]');
        },
        shoplistremove(state,id){
            //根据 id ，从 store 中删除对应的商品数据
            state.cart.some((item,i)=>{
                if(item.id == id){
                    state.cart.splice(i,1)
                    return true;
                }
            })
        //将删除完毕完数量保存新的数据到本地存储中去
        localStorage.setItem('cart',JSON.stringify(state.cart));
        },
        updategoodsselected(state,info){
            state.cart.some(item=>{
                if(item.id == info.id){
                    item.selected = info.selected
                }
            })
            //将最新完毕完数量保存新的数据到本地存储中去
            localStorage.setItem('cart',JSON.stringify(state.cart));
        }
        
    },
    getters:{// this.$store.getters.*** 
        // 相当于 计算属性 也相当于 filters
        getallcount(state){
            var c = 0
            state.cart.forEach(item=>{
               c += item.count;
            })
            return c;
        },
        getgoodscount(state){
            var o = {}
            state.cart.forEach(item=>{
                o[item.id] = item.count;
            })
            return o;
        },
        getgoodsselected(state){
            var o = {}
            state.cart.forEach(item=>{
                o[item.id] = item.selected
            })
            return o
        },
        getshopallcount(state){
            var cc = 0
            state.cart.some(item=>{
                if(item.selected == true){
                       cc += item.count;
                }
            })
            return cc;
        },
        getshopallprice(state){
            var p = 0
            state.cart.forEach(item=>{
                if(item.selected == true){
                    p += item.price;
                 }
            })
            return p;
        }
    }
})  

//导入 mui 样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'


//按需求导入 mint-ui 中的组件
// import { Header , Swipe , SwipeItem , Button , Lazyload } from 'mint-ui'
// import 'mint-ui/lib/style.css'
// Vue.component(Header.name,Header);  
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name,Button);
// Vue.use(Lazyload);
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

//安装图片预览 vue-preview
import VuePreview from 'vue-preview'
Vue.use(VuePreview)


//1.3 导入自己的 router.js 路由模块
import router from './router.js'

// 导入 app 根组件
import app from './app.vue'

var vm = new Vue({
    el:'#app',
    render:c=>c(app),
    router,//1.4 挂载路由对象到 vm 实例中
    store//将 vuex 创建的 store 挂载到 VM 实例上
})